<%--
    Document   : Consultar Grupo
    Author     : Josmary Carrero
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>

<% request.setAttribute("allowed", "Consultar Grupos"); %>
<%@ include file='../Templates/security.jsp' %>

<h1 class="title">Gestión de Grupos</h1>
<hr>
<p class="meta"></p>
<div id="entry">
    <h2>Consultar Grupos</h2>
    <br>
    <form id="consultarGrupoForm" action="javascript:void(0);">
        <table  align="center" border="0">
            <tr>
                <td>Nombre:</td>
                <td>
                    <input type="text" name="nombre" id="nombre" class="filter">
                </td>
            </tr>
            <tr>
                <td>Sede:</td>
                <td>
                    <select id="Sedes" name="sede" class="filter"></select>
                </td>
            </tr>
            <tr>
                <td>Tipo:</td>
                <td>
                    <select id="Tipo" name="tipo" class="filter">
                        <option value="">-</option>
                        <option value="Oficial">Oficiales</option>
                        <option value="Supervisor">Supervisores</option>
                        <option value="Edificio">Oficial Edificio</option>
                        <option value="Motorizado">Oficial Motorizados</option>
                        <option value="Direccion">Direccion</option>
                    </select>
                </td>
            </tr>
        </table>
        <br>
        <html:button property="" value="Consultar" styleId="consultarForm" onclick="consultaGrupos()" styleClass="oculta"/>
        <html:button property="" value="  Mostrar Todo  " onclick="consultaGruposTodo()"/>
        <html:button property="" styleId="gruposOption" value="  Atrás  "/>
        <html:reset property="" styleId="resetForm" value="Limpiar" styleClass="oculta"/>
        <br><div style="clear: both;">&nbsp;</div><br>
    </form>
    <br>
    <div id="consultaGrupo">
        <table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
            <thead>
                <tr>
                    <th><h5><div class='ordenar'  onclick="orden('id_grupo');" >Nombre</div></h5></th>
                    <th><h5><div class='ordenar'  onclick="orden('tipo_grupo');" >Tipo</div></h5></th>
                    <th><h5><div class='ordenar'  onclick="orden('sede');" >Sede</div></h5></th>
                </tr>
            </thead>
            <tbody id="resultado"></tbody>
        </table>
        <html:button property="" value="Consultar" styleId="consultarForm" onclick="consultaGrupos()" styleClass="oculta"/>
        <html:reset property="" styleId="resetForm" value="Limpiar" styleClass="oculta"/>
        <div style="clear: both;">&nbsp;</div>
        <%@ include file="../Templates/paginasTabla.jsp" %>
    </div>
</div>
<script type="text/javascript">
    $('.filter').change(function(){
        offset=0;
        consultaGrupos();
    });

    $(function(){
        $("#consultaGrupo").hide();
        listaSedes();
        consultaGrupos();
    });

    function consultaGrupos(){
        limit = $('#limit').val();
        $.ajax({
            method: "POST",
            url:"consultarGrupos.do?limit="+limit+"&offset="+offset+"&order="+order+"&asc="+asc,
            data: $('#consultarGrupoForm').serialize(),
            dataType: "json",
            success: processConsultaGrupos
        });
    }

    function processConsultaGrupos(data) {
        $('#resultado').html("");
        $.each(data.Grupos, function(i,item){
            tr = $('<tr>');
            tr.append($("<td>").append(item.id_grupo));
            tr.append($("<td>").append(item.tipo_grupo));
            tr.append($("<td>").append(item.sede));

            $('#resultado').append(tr);
        });

        tam = data.tam
        if(tam==0){
            $("#obs").html('<h4>No hay resultados que coincidan con los parametros dados.</h4>');
            $("#consultaGrupo").hide();
        } else {
            $("#obs").html('OBSERVACIÓN: Para ordenar la tabla por un campo específico, presionar el nombre de la columna.');
            $("#currentpage").html((offset/limit)+1);
            $("#pagelimit").html(Math.ceil(tam/limit));
            $("#consultaGrupo").show();
        }
    }

    function consultaGruposTodo(){
        $('#resetForm').click();
        consultaGrupos();
    }
    
</script>